<script>
import router from "@/router/index.js";
export default {
  name: "information-gongre",
  components: {},
  data() {
    return {
      mainTitle: '换热站名称',
      showEchart: false
    }
  },
  props: {
    mainTitle: {
      default: '',
      required: true
    },
    type: {
      default: '',
      required: true
    },
    stationType: {
      default: '',
      required: true
    },
    id: {
      default: '',
      required: true
    },
    listData: {
      default: () => { return [] },
      required: true
    },
    showRoute: {
      default: true,
      required: true
    },
    showButtom: {
      default: false,
      required: true
    },
    heightGap: {
      default: '0rem',
      required: false
    },
    showClose: {
      default: true,
      required: true
    }
  },
  computed: {
  },
  watch: {
  },
  mounted() {
  },
  beforeUnmount() {
  },
  methods: {
    close() {
      this.$emit('close')
    },

    getTitleStyle() {
      return
    },
    routeTo() {
      router.push({
        path: '/heat-detail',
        query: {
          id: this.id,
          type: this.type,
          stationType: this.stationType
        }
      })
    },
    toggleEchart() {
      this.showEchart = !this.showEchart;

      var data_val = [2220, 1682, 2791, 3000, 4090, 3230, 2910],
        xAxis_val = ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'];
      var data_val1 = [0, 0, 0, 0, 0, 0, 0];
      var option = {
        backgroundColor: '#293042',
        grid: {
          left: 10,
          top: '10%',
          bottom: 20,
          right: 40,
          containLabel: true
        },
        tooltip: {
          show: true,
          backgroundColor: '#384157',
          borderColor: '#384157',
          borderWidth: 1,
          formatter: '{b}:{c}',
        },
        legend: {
          right: 0,
          top: 0,
          data: ['距离'],
          textStyle: {
            color: '#ffffff'
          }
        },
        title: {
          show: false,
          text: '',
          x: '4.5%',
          top: '1%',
          textStyle: {
            color: '#ffffff'
          }
        },
        xAxis: {
          data: xAxis_val,
          boundaryGap: false,
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          ayisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#2e3547'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        },

        series: [
          {
            type: 'bar',
            name: 'linedemo',
            tooltip: {
              show: false
            },
            animation: false,
            barWidth: 1.4,
            hoverAnimation: false,
            data: data_val,
            itemStyle: {
              normal: {
                color: '#f17a52',
                opacity: 0.6,
                label: {
                  show: false
                }
              }
            }
          },
          {
            type: 'line',
            name: 'linedemo',
            smooth: true,
            symbolSize: 10,
            animation: false,
            lineWidth: 1.2,
            hoverAnimation: false,
            data: data_val,
            symbol: 'circle',
            itemStyle: {
              normal: {
                color: '#f17a52',
                shadowBlur: 40,
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#f17a52',

                  }
                }
              }
            },
            areaStyle: {
              normal: {
                color: '#f17a52',
                opacity: 0.08
              }
            }

          }
        ]
      };
      const myChart = echarts.init(document.getElementById('LiuliangEchart'));
      myChart.setOption(option);
    }
  },
};
</script>

<template>
  <div class="simple-card" :class="[
    position
  ]">
    <div class="header">
      <div class="main-title">
        <span class="main-title-1 font-YouSheBiaoTiHei" :style="getTitleStyle()">{{ mainTitle }}</span>
        <!-- <span class="main-tag" v-if="showRoute" @click="routeTo()">
          指标监控 >>>
        </span> -->
      </div>
      <!-- close -->
      <div class="close-area" @click="close">
      </div>
    </div>
    <div class="body" :class="[
      showButtom ? 'show-buttom' : ''
    ]">
      <div class="inner font-AlibabaPuhui" v-for="(item, index) in listData" :key="index">
        <span class="name">{{ item.name }}</span>
        <span class="value">{{ item.value }}</span>
      </div>
    </div>
    <div class="popup-tip-container">
      <div class="popup-tip"></div>
    </div>
    <div class="ring-container">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/2000/xlink"
        viewBox="0 0 25.6 25.6" style="background-color: transparent" width="100%" height="100%">
        <use href="#icon-aqua"></use>
      </svg>
    </div>
  </div>
</template>
<style lang="less" scoped>
@gapwidth: 3.5rem;

#LiuliangEchart {}

.liuliang-echart {
  overflow: hidden;
  border-radius: 5px;
  position: absolute;
  left: 0;
  top: 40px;
  width: 472px;
  height: 300px;
}

.buttom-section {
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  position: relative;

  &>.buttom-section-inner {
    display: inline-block;
    width: 80px;
    border: 1px solid rgb(255, 99, 71);
    background-color: rgba(255, 99, 71, 0.8);
    border-radius: 5px;
    padding: 0 10px;
    font-size: 16px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.simple-card {
  color: #ECF5FD;
  position: absolute;
  left: -22rem;
  bottom: v-bind(heightGap);
  border-radius: .5rem;
  background-image: url(./images/body.svg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 44rem;
  transform: scale(0.85);
  transform-origin: bottom center;

  &>.header {
    width: 100%;
    height: 3.5rem;
    background-image: url(./images/main-header.svg);
    display: flex;
    justify-content: space-between;
    align-items: center;

    &>.main-title {
      height: 100%;
      font-size: 2rem;
      line-height: 2rem;
      align-items: center;
      width: 100%;
      display: flex;
      justify-content: space-between;

      &>span.main-title-1 {
        position: relative;
        left: 2rem;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        width: 50%;
        text-overflow: ellipsis;
        line-height: 3.6rem;
      }

      &>span.main-tag {
        font-size: 1.25rem;
        line-height: 1;
        position: relative;
        margin-right: 1rem;
        cursor: pointer;

        &>.type-1 {
          color: #02FF7F;
          border: 1px solid #02FF7F;
          background-color: rgba(2, 255, 129, 0.2);
          padding: 0 1rem;
          border-radius: 1rem;
        }

        &>.type-2 {
          color: #F93030;
          border: 1px solid #F93030;
          background-color: rgba(249, 48, 48, 0.2);
          padding: 0 1rem;
          border-radius: 1rem;
        }
      }
    }

    &>.close-area {
      margin-right: 0.5rem;
      width: 1.5rem;
      height: 1.5rem;
      background-image: url(./images/close.svg);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      cursor: pointer;
      position: relative;
      right: 10px;
    }
  }

  &>.body {
    position: relative;
    padding: 10px;
    height: 225px;
    overflow-y: auto;

    &.show-buttom {
      height: 185px;
    }

    &>.inner {
      line-height: 24px;
      display: flex;
      margin-bottom: 5px;
      padding: 5px;
      font-size: 16px;

      &:nth-child(even) {
        background-color: rgba(63, 81, 181, 0.2);
      }

      &>.name {
        width: 150px;
        color: #B9DAFF;
      }

      &>.value {
        margin-left: 10px;
        color: #fff;
      }
    }

    // height: 300px;
    // &::before {
    //   position: absolute;
    //   content: " ";
    //   z-index: -1;
    //   width: 100%;
    //   height: 100%;
    //   backdrop-filter: blur(4px);
    // }
  }

  &>.popup-tip-container {
    position: absolute;
    bottom: -2rem;
    left: 50%;
    margin-left: -1.9rem;
    content: "";
    width: 4rem;
    height: 2rem;
    pointer-events: none;
    overflow: hidden;

    &>.popup-tip {
      width: 2rem;
      height: 2rem;
      background-color: #132236;
      margin: -1rem auto 0;
      transform: rotate(45deg);
    }
  }
  &>.ring-container {
    position: absolute;
    z-index: -1;
    bottom: -34px;
    left: 50%;
    margin-left: -19px;
    content: "";
    width: 40px;
    height: 40px;
    pointer-events: none;
    overflow: hidden;
  }
}
</style>